<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新漫监控平台</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="shortcut icon" href="images/logo1.ico"/>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/common.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/index.js"></script>
</head>

<body class="dataManager">
    <img src="images/bg1.jpg" class="bgimg" alt="">
    <div class="contentbox">
        <div class="title">
            <span>后台管理界面</span>
            <span>|</span>
            <span class="small-title">SIMMAX</span>
            <div class="avatar-box">
                <img src="images/bg.jpg" class="avatar" alt="">
                <span class="ava-name">LIULISHEJUZHE</span>
            </div>
            <div class="setting-box">
                <a href="#">
                    <img src="images/back.png" alt=""> 退出
                </a>
            </div>
        </div>
        <ul class="menu-box">
            <li class="menu1 ">
                <a href="interface.html">连接设备</a>
            </li>
            <li class="menu2">
                <a href="index.html">实时监控</a>
            </li>
            <li class="menu6 active">
                <a href="dataManager.html">数据管理</a>
            </li>
            <li class="menu3">
                <a href="Parameters.html">参数设置</a>
            </li>
            <li class="menu4 ">
                <a href="user.html">用户管理</a>
            </li>
            <li class="menu5">
                <a href="#">帮助</a>
            </li>
            <li class="menu7">
                <a href="systemLog.html">日志管理</a>
            </li>
        </ul>
        <div class="mainbox">
            <div class="user-form">
                <form action="">
                    <div class="data-line">
                        <div class="data-input1 data-select">
                            查询
                        </div>
                        <div class="data-input1 data-print">
                            打印
                        </div>
                        <div class="data-input1 data-warn">
                            报警记录
                        </div>
                        <div class="data-timeBox">
                            <span>起始时间：</span>
                            <div class="data-time">
                                <input type="text" class="demo-input" placeholder="开始时间" id="startDate">
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="data-selectBox">
                            <span>仪器编号：</span>
                            <div class="data-select-bg">
                                <select class="data-selectOption">
                                </select>
                            </div>
                        </div>
                        <div class="data-timeBox">
                            <span>结束时间：</span>
                            <div class="data-time">
                                <input type="text" class="demo-input" placeholder="结束时间" id="endDate">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="data-time-listbox">
                <ul class="data-time-list clearfix">
                    <!--<li>分钟数据</li>-->
                    <li>小时数据</li>
                    <!--<li>天数数据</li>
                    <li>月数据</li>-->
                </ul>
            </div>
            <div id="screenbox">
                <span class="slimTop"></span>
                <span class="slimBottom"></span>
                <div class="data-tablelist">
                    <style>
                        table{
                            border-collapse: collapse;
                            border:1px solid #aaa;
                            width:100%;
                            text-align: center;
                        }   
                        td{
                            border: 1px solid #aaa;
                        } 
                    </style>
                    <table class="data-table" cellpadding="0" cellspacing="0">
                        <thead class="data-title">
                            <tr>
                                <td>仪器编号</td>
                                <td>剂量率（uSv/h）</td>
                                <td>日期</td>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var timeType=0 //查询类型

    $(".data-tablelist").slimScroll({
        height: '370px',
        size: "10px",
        alwaysVisible: true,
        opacity: 1,
        railVisible: true,
        //        railColor:"#2d2d2d",
        railColor: 'url("images/scroll_bg.png")',
        railOpacity: 1,
        railBorderRadius: "7px",
        railDraggable: true
    });
    /*点击获取数据*/
    $('.data-select').on('click', function () {
        timeType=0;
        getDeviceInfo()
    });

    function getDeviceInfo(){
        var data = {
            count: 100,
            deviceId: $('.data-selectOption').val(),
            // fromTime: $("#startDate").val() || utils.formatTime(new Date()),
            fromTime: $("#startDate").val() ,
            type: timeType,
            // toTime: $('#endDate').val() || utils.formatTime(new Date()),
            toTime: $('#endDate').val(),
            page: 1,
            lastOneHour:1,
        }
        $.ajax({
            url: apiDomain + datamanagerInfoList,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data: data,
            success: function (data) {
                console.log(data);
                var dataList = data.data.list;
                $("tbody").html('');
                for (var i = 0; i < dataList.length; i++) {
                    if (dataList[i].flagAlarm == 4 || dataList[i].flagAlarm == 3) {
                        $("tbody").append("<tr class='red'><td>" + dataList[i].deviceId + "</td><td>" + Math.floor(dataList[i].doserate * 100) / 100 + "</td><td>" + dataList[i].time + "</td></tr>");
                    } else if (dataList[i].flagAlarm == 2) {
                        $("tbody").append("<tr class='yellow'><td>" + dataList[i].deviceId + "</td><td>" + Math.floor(dataList[i].doserate * 100) / 100 + "</td><td>" + dataList[i].time + "</td></tr>")
                    } else {
                        $("tbody").append("<tr><td>" + dataList[i].deviceId + "</td><td>" + Math.floor(dataList[i].doserate * 100) / 100 + "</td><td>" + dataList[i].time + "</td></tr>")
                    }
                }
            }
        });
    }

    /*点击动态获取数据*/
    function selectBg() {
        $.ajax({
            url: apiDomain + dataMangerList,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data: {
                count: 10,
                type: 3,
                page: 1,
            },
            success: function (data) {
                var data = data.data.list;
                for (var i = 0; i < data.length; i++) {
                    var dataId = data[i].id;
                    $('.data-selectOption').append("<option value=" + dataId + ">" + dataId + "</option>")
                }
            }
        });
    }
    selectBg();
    $('.data-warn').on('click',function(){
        var data = {
            count: 100,
            deviceId: $('.data-selectOption').val(),
            page: 1,
        }
        $.ajax({
            url: apiDomain +dataManerAlarm ,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data: data,
            success: function (data) {
                var dataList = data.data.list;
                console.log(dataList.length);
                $("tbody").html('');
                for (var i = 0; i < dataList.length; i++) {

                    $("tbody").append("<tr class='red'><td>" + dataList[i].deviceId + "</td><td>" + Math.floor(dataList[i].doserate * 100) / 100 + "</td><td>" + dataList[i].time + "</td></tr>");

                }
            }
        });
    })
</script>
<script src="laydate/laydate.js"></script>
<script>
    laydate.render({
        elem: '#startDate',
        type: 'datetime',
        // value: new Date(new Date().getTime() - 24 * 3600 * 1000)
    });
    laydate.render({
        elem: '#endDate',
        type: 'datetime',
        // value: new Date()
    });

    //获取默认数据
    getDeviceInfo()


    $('.data-time-list').on('click', 'li', function (e) {
        var index = $(this).index();
        switch (2) {
            case 0: timeType = 1; break;
            case 1: timeType = 2; break;
            case 2: timeType = 3; break;
            case 3: timeType = 4; break;
            default: timeType = 0
        }
        getDeviceInfo()
        // 0：秒 1：分 2：小时 3：天 4：月
    })

    $('.data-print').click(function(){
        var printHtml = $('.data-tablelist').html();
        var wind = window.open("",'newwindow', 'height=600, width=600, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
        wind.document.body.innerHTML = printHtml;
        wind.print();
    })
</script>

</html>